<template>
	<div>
		<div class="mask"></div>
		<div class="modal-content">
			<div class="bg-white px-50 py-40 rounded-50" style="width: 600rpx;">
				<div class="center font-bold fz30 text-gray-16">
					提示
				</div>

				<slot></slot>
				<div class="between" style="gap:30rpx">
					<div v-if="showCancel"
						class="w-full bg-purple center text-white h-80 rounded-50 cancel font-bold fz26" style="margin-top: 10rpx;"
						@click="cancel">{{cancelText||"取消"}}</div>
					<button v-if="showShare" class="w-full bg-purple center text-white h-80 rounded-50 font-bold fz26" style="margin-top: 10rpx;"
						open-type="share">分享</button>
					<div v-else class="w-full bg-purple center text-white h-80 rounded-50 font-bold" @click="confirm" style="margin-top: 10rpx;">
						{{confirmText||"去分享"}}
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["showCancel", "confirmText","showShare","cancelText"],
		onShareAppMessage() {
			return {
				title: '发布消息找到那个他/她',
				path: '/pages/index/index?id=123'
			}
		},
		methods: {
			confirm() {
				this.$emit("confirm")
			},
			cancel() {
				this.$emit("cancel")
			}
		}
	}
</script>

<style lang="less">
	.cancel {
		border: 1rpx solid #AC5FF8;
		background-color: #fff;
		color: #AC5FF8;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 101;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>